<template>
    <div>
        <h2>{{info}}</h2>
        <button @click="changeInfo">修改</button>
    </div>
</template>

<script>
    import { ref, shallowRef, triggerRef } from 'vue';

    export default {
        setup() {
            const info = shallowRef({name: 'leon'})

            const changeInfo = () => {
                // info.value  = {name: 'leo'};
                info.value.name = 'leo';
                // 当不想使用深层响应式的时候,使 用shallowRef
                triggerRef(info);
                // triggerRef手动触发强制响应式

            }

            return {
                info,
                changeInfo
            }
        }
    }
</script>

<style scoped>

</style>